<template>
    <view class="container">
        <view class="banner"></view>
        <view class="state">抽奖成功</view>
        <view class="activity-log">抽奖记录 ></view>
        <view class="action-kj">距离开奖 10:00:00</view>
        <view class="tips">剩余抽奖机会<text>2</text>次</view>

        <view class="btn">继续抽奖</view>
        <view class="active-time">抽奖结果将于2022.04.01 12:00:00公布</view>
        <view class="activity-rule">
            <view class="rule-title">————【 抽奖活动规则 】————</view>
            <view class="rule-content">
                <view class="p">1.<text style="color: #FFCE47">注册用户</text>可获得抽奖机会一次</view>
                <view class="p">2.抢购<text style="color: #FFCE47">咪咕熊猫太空系列NFT</text>可获得抽奖机会一次</view>
                <view class="p"> 3.抽奖活动时间2022.04.01 00:00:00-2022.04.04 00:00:00 </view>
                <view class="p">4.抽奖结果将于2022.04.04 10:00:00公布</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { getActivityNum } from "@/config/api"
    export default {
        data() {
            return {
                activityId: null,
                activityInfo: {}
            }
        },
        onLoad(option) {
            this.activityId = option.activityId
            this.getData()
        },
        methods: {
            async getData() {
                const res = await getActivityNum(this.activityId)
                this.activityInfo = res
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        box-sizing: border-box;
        background: url("https://img.ionepin.com/a2fa9c1e168b5f8c3f63b564152a31f7476f3962.png") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        min-height: 100vh;
        padding-top: 50rpx;
        position: relative;
        padding-bottom: 30rpx;
        .banner {
            background: url("https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_success.png") no-repeat;
            background-size: 100% 100%;
            width: 120rpx;
            height: 120rpx;
            margin: 140rpx auto 0 auto;
        }
        .state {
            margin-top: 34rpx;
            font-size: 44rpx;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: bold;
            color: #FEDC00;
            text-align: center;
        }
        .activity-log {
            position: absolute;
            top: 56rpx;
            right: 0;
            text-align: center;
            background: url("https://img.ionepin.com/0667b41c1d294f63a2e8990c0c493ec467e11292.png") no-repeat;
            background-size: 100% 100%;
            width: 140rpx;
            height: 44rpx;
            line-height: 44rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
        }
        .tips {
            font-size: 32rpx;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: bold;
            color: #FFFFFF;
            margin: 62rpx auto 21rpx auto;
            text-align: center;
            text {
                color: #FEDC00;
                font-size: 42rpx;
                margin: 0 20rpx;
            }
        }
        .action-kj {
            width: 294rpx;
            height: 62rpx;
            background: rgba(255, 255, 255, 0.2);
            font-size: 30rpx;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;
            border-radius: 4rpx;
            margin: 71rpx auto 0 auto;
            text-align: center;
            line-height: 62rpx;
        }

        .btn {
            width: 614rpx;
            height: 88rpx;
            background: url("https://img.ionepin.com/2c18608efc64e23a1dcec0518ea66efde128f71a.png") no-repeat;
            background-size: 100% 100%;
            line-height: 88rpx;
            font-size: 32rpx;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
            margin: 85rpx auto 0 auto;
        }
        .active-time {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #AA99CD;
            text-align: center;
            margin: 30rpx auto 0 auto;
        }
        .activity-rule {
            margin: 92rpx 45rpx 0 45rpx;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 14rpx;
            padding: 26rpx 23rpx 29rpx 23rpx;
            .rule-title {
                text-align: center;
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
            .rule-content {
                .p {
                    font-size: 22rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFF4F5;
                }
            }
        }
    }
</style>
